<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>加载天地图</title>
    <link href="ol/ol.css" rel="stylesheet" type="text/css" />
    <script src="ol/ol.js" type="text/javascript"></script>
    <style type="text/css">
        #mapCon {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <!-- 地图容器 -->
    <div id="mapCon"></div>

    <script type="text/javascript">
        var key = "4689fc6b9bc0fdc8c48298f751ebfb41";//天地图密钥

        //ol.layer.Tile：是一个瓦片图层类，用于显示瓦片资源。
        //source是必填项，用于为图层设置来源。

        //ol.source.XYZ: 
        //创建天地图矢量图层
        var TiandiMap_vec = new ol.layer.Tile({
            title: "天地图矢量图层",
            source: new ol.source.XYZ({
                url: "http://t{0-7}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + key,
                wrapX: false
            })
        });
        //创建天地图矢量注记图层
        var TiandiMap_cva = new ol.layer.Tile({
            title: "天地图矢量注记图层",
            source: new ol.source.XYZ({
                url: "http://t{0-7}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + key,
            })
        });
        //实例化Map对象加载地图
        var map = new ol.Map({
            //地图容器div的ID
            target: 'mapCon',
            //地图容器中加载的图层
            layers: [TiandiMap_vec, TiandiMap_cva],
            //地图视图设置
            view: new ol.View({
                //地图初始中心点（经纬度）
                center: [118.2, 36.5],
                //地图初始显示级别
                zoom: 7,
                projection: "EPSG:4326"
            })
        });
        //如果想画画，首先需要有一张纸或者画布，地图则需要一个绘制层
        //创建一个矢量图层Vector 作为绘制层，ol.source.Vector是用来设置矢量图层数据来源的
        var source = new ol.source.Vector();
        //创建一个图层 ol.layer.Vector矢量图层类
        var vector = new ol.layer.Vector({
            source: source
        });
        //将绘制层添加到地图容器中
        map.addLayer(vector);

        //创建地图实例时，使用的是 EPSG:4326 投影坐标，以下的方法均采用经纬度坐标坐标点进行实现

        //添加点
        var point = new ol.Feature({
            geometry: new ol.geom.Point([118.26, 37.35]),
            style:new ol.style.Style({
                //填充色
                fill: new ol.style.Fill({
                    color: 'rgba(74, 143, 255, 1)'
                }),
                //边线颜色
                stroke: new ol.style.Stroke({
                    color: '#4a8fff',
                    width: 2
                }),
                //形状
                image: new ol.style.Circle({
                    radius: 20,
                    fill: new ol.style.Fill({
                        color: '#4a8fff'
                    })
                })
            })
        });
        //也可以通过setStyle的方法，设置样式
        //设置点1的样式信息
        /*point.setStyle(new ol.style.Style({
            //填充色
            fill: new ol.style.Fill({
                color: 'rgba(255, 255, 255, 0.2)'
            }),
            //边线颜色
            stroke: new ol.style.Stroke({
                color: '#4a8fff',
                width: 2
            }),
            //形状
            image: new ol.style.Circle({
                radius: 17,
                fill: new ol.style.Fill({
                    color: '#4a8fff'
                })
            })
        }));*/
        //将创建的 点 元素 添加到图层
        source.addFeature(point);

        //添加线
        //创建一个线
        var Line = new ol.Feature({
            geometry: new ol.geom.LineString([[118.25,36.17], [113.56, 35.11]])
        });

        //设置线的样式
        Line.setStyle(new ol.style.Style({
            //填充色
            fill: new ol.style.Fill({
                color: 'rgba(74, 143, 255, 0.2)'
            }),
            //边线颜色
            stroke: new ol.style.Stroke({
                color: '#4a8fff',
                width: 5
            }),
            //形状
            image: new ol.style.Circle({
                radius: 7,
                fill: new ol.style.Fill({
                    color: '#4a8fff'
                })
            })
        }));
        //将创建的 线 元素 添加到图层
        source.addFeature(Line);

        /*****************添加面*****************/
        //添加圆
        //创建一个圆
        var Circle = new ol.Feature({
            geometry: new ol.geom.Circle([116.53,34.23], 0.1)//0.01表示1公里
        });

        Circle.setStyle(new ol.style.Style({
            //填充色
            fill: new ol.style.Fill({
                color: 'rgba(255, 255, 255, 0.5)'
            }),
            //边线颜色
            stroke: new ol.style.Stroke({
                color: '#4a8fff',
                width: 3
            }),
            //形状
            image: new ol.style.Circle({
                radius: 7,
                fill: new ol.style.Fill({
                    color: '#4a8fff'
                })
            })
        }));
        //将创建的 圆 元素 添加到图层
        source.addFeature(Circle);

        //添加正方形

        
        var CircleForSquare = new ol.geom.Circle([115.63,37.82], 0.1);//创建一个圆
        //根据圆获取多边形
        
        var Square = new ol.Feature({
            //fromCircle() 通过圆矢量特性创建一个多边形矢量特性,(圆矢量特性,多边形的边数（默认32）,第一个顶点的多边形角弧度)
            geometry: new ol.geom.Polygon.fromCircle(CircleForSquare, 4, 150)
        });

        Square.setStyle(new ol.style.Style({
            //填充色
            fill: new ol.style.Fill({
                color: 'rgba(255, 255, 255, 0.8)'
            }),
            //边线颜色
            stroke: new ol.style.Stroke({
                color: 'green',
                width: 2
            }),
            //形状
            image: new ol.style.Circle({
                radius: 7,
                fill: new ol.style.Fill({
                    color: '#4a8fff'
                })
            })
        }));
        //将创建的 正方形 元素 添加到图层
        source.addFeature(Square);

        //添加矩形
        //根据范围获取多边形
        var Rectangle = new ol.Feature({
            geometry: new ol.geom.Polygon.fromExtent([116.35,36.77,118.89,35.89])
        });

        Rectangle.setStyle(new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'rgba(123, 237, 159,0.5)'
            }),
            stroke: new ol.style.Stroke({
                color: '#4a8fff',
                width: 4
            }),
            image: new ol.style.Circle({
                radius: 7,
                fill: new ol.style.Fill({
                    color: '#4a8fff'
                })
            })
        }));
        //将创建的 矩形 元素 添加到图层
        source.addFeature(Rectangle);

        //添加多边形
        //创建一个多变形
        var Polygon = new ol.Feature({
            geometry: new ol.geom.Polygon([[[117.56,35.32], [118.25, 36.23], [117.82, 37.25]]])
        });
        //设置区样式信息
        Polygon.setStyle(new ol.style.Style({
            //填充色
            fill: new ol.style.Fill({
                color: 'rgba(237, 193, 166, 0.5)'
            }),
            //边线颜色
            stroke: new ol.style.Stroke({
                color: '#e54ced',
                width: 2
            }),
            //形状
            image: new ol.style.Circle({
                radius: 7,
                fill: new ol.style.Fill({
                    color: '#e54ced'
                })
            })
        }));
        //将创建的 多变形 元素 添加到图层
        source.addFeature(Polygon);

        /*****************添加面*****************/
    </script>
</body>
</html>
